<template>
    <div>
        <swiper-view></swiper-view>
    </div>
    <!-- 图表部分 -->
    <div>
        <el-row :gutter="20">
            <el-col :span="20">
                <div class="grid-content ep-bg-purple">
                    <div class="bugbox">
                        
                        <div class="rbox">
                            <div class="rlbox">
                                <div class="lbox" style='width:100px;margin-right:100px;margin-left:50px'>
                                    <p>问题总数</p>
                                    <h2>{{obj.data1.length + obj.data2.length + obj.data3.length}}</h2>
                                </div>
                               <div>
                                    <div style="margin-top:20px">
                                        <p>已处理</p>
                                        <h2>{{obj.data1.length}}</h2>
                                    </div>
                                    <div id="main1" style="width: 280px; height: 270px;"></div>
                               </div>
                                <div>
                                    <div style="margin-top:20px">
                                        <p>待处理</p>
                                        <h2 class="rbh4">{{obj.data2.length}}</h2>
                                    </div>
                                    <div id="main2" style="width: 280px; height: 270px;"></div>
                                </div>
                                <div>
                                    <div style="margin-top:20px">
                                        <p>已完结</p>
                                        <h2 class="rbh4">{{obj.data3.length}}</h2>
                                    </div>
                                    <div id="main3" style="width: 280px; height: 270px;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </el-col>
            <!-- <el-col :span="12">
               
            </el-col> -->
        </el-row>
        <!-- <div class="grid-content ep-bg-purple-light">
            <myChart></myChart>
        </div> -->
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, resolveDirective,reactive } from "vue"
import SwiperView from '@/components/SwiperView.vue'
import * as echarts from 'echarts';
import myChart from '../components/MyEcharts.vue'
import myEchart from '../components/MyEcharts1.vue'
import { developerQueryMe, developerQuery } from '../services/developerService'

// let res = await developerQueryMe({
//     type: radio.value,
//     pageindex: pageindex.value,
//     pageNum: pageNum.value,
//     keyValue: inputValue.value
//   })
let numData = ref([])
let count = ref(null)
const obj = reactive({
    data1:[],
    data2:[],
    data3:[],
})
let searchKey = async (type) => {
    let res = await developerQueryMe({
        type,
        pageindex: 1,
        pageNum: 100,
        keyValue: ''
    })
    count.value = count.value + res.data.data.length;
    if(type ===1){
        obj.data1 = res.data.data
    }
    if(type === 2){
        obj.data2 = res.data.data
    }
    if(type === 3){
        obj.data3 = res.data.data
    }
  return res.data
}
searchKey(1)
searchKey(2)
searchKey(3)


onMounted(async () => {
    numData.value = [0,0,0]
    let resp = await developerQueryMe({
        pageindex: 1,
        pageNum:100000000,
    })

    let resultdata = resp.data.data.map(item=>{
        if(item.type ==1) numData.value[0]++
        if(item.type ==2) numData.value[1]++
        if(item.type ==3) numData.value[2]++
    })


    console.log(numData.value)



    // 已解决数环形图
    var chartDom = document.getElementById('main1');
    var myChart = echarts.init(chartDom);
    var option;
    console.log(54555, count);
    
    option = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '5%',
            left: 'center'
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['40%', '60%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderColor: '#fff',
                    borderWidth: 1
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 40,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    { value: count.value, itemStyle: { color: "#D3DCE6" } },
                    { value: obj.data1.length, itemStyle: { color: "#00cc00" } },

                ]
            }
        ],
        graphic: {  // 这部分代码用于在环形图中心添加文本
            type: 'text',
            left: 'center',  // 文本的水平位置
            top: 'center',  // 文本的垂直位置
            style: {
                text: `已处理${((obj.data1.length * 100)/count.value).toFixed(1)}`,  // 要显示的文本内容
                textAlign: 'center',  // 文本对齐方式
                fill: '#00cc00',  // 文本颜色
                width: 30,  // 文本的宽度（可选）
                height: 30,  // 文本的高度（可选）
                fontSize: 16  // 字体大小
            }
        }
    };

    option && myChart.setOption(option);

    // 未解决数环形图
    var chartDom = document.getElementById('main2');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '5%',
            left: 'center'
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['40%', '60%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderColor: '#fff',
                    borderWidth: 1
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 40,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    { value: count.value, itemStyle: { color: "#D3DCE6" } },
                    { value: obj.data2.length, itemStyle: { color: "orange" } },
                ]
            }
        ],
        graphic: {  // 这部分代码用于在环形图中心添加文本
            type: 'text',
            left: 'center',  // 文本的水平位置
            top: 'center',  // 文本的垂直位置
            style: {
                text: `待处理${((obj.data2.length * 100)/count.value).toFixed(1)}`,  // 要显示的文本内容
                textAlign: 'center',  // 文本对齐方式
                fill: 'orange',  // 文本颜色
                width: 30,  // 文本的宽度（可选）
                height: 30,  // 文本的高度（可选）
                fontSize: 16  // 字体大小
            }
        }
    };

    option && myChart.setOption(option);

    // 已解决数环形图
    var chartDom = document.getElementById('main3');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '5%',
            left: 'center'
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['40%', '60%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderColor: '#fff',
                    borderWidth: 1
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 40,
                        fontWeight: 'blur'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    { value: count.value, itemStyle: { color: "#D3DCE6" } },
                    { value: obj.data3.length, itemStyle: { color: "#00Ec0F" } },

                ]
            }
        ],
        graphic: {  // 这部分代码用于在环形图中心添加文本
            type: 'text',
            left: 'center',  // 文本的水平位置
            top: 'center',  // 文本的垂直位置
            style: {
                text: `已完结${((obj.data3.length * 100)/count.value).toFixed(1)}`,  // 要显示的文本内容
                textAlign: 'center',  // 文本对齐方式
                fill: '#00cc00',  // 文本颜色
                width: 30,  // 文本的宽度（可选）
                height: 30,  // 文本的高度（可选）
                fontSize: 16  // 字体大小
            }
        }
    };

    option && myChart.setOption(option);

})

</script>

<style scoped>
.el-row{
    margin-right:0 !important;
}
.bugbox {
    width: 100%;
    height: 100%;
    text-align: center;
}

.bugbox .lbox {
    box-sizing: border-box;
}

.bugbox .lbox h2 {
    color: green;
}

.bugbox .rbox {
    width: 60%;
    height: 340px;
}

.bugbox .rbox .rlbox {
    width: 100%;
    height: 340px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    
}

.bugbox .rbox .rlbox div {
    box-sizing: border-box;
}

.bugbox .rbox .rlbox div:first-child h2 {
    color: green;
}

.bugbox .rbox .rlbox div:last-child h2 {
    color: orange;
}



.bugbox .rbox .rrbox {
    width: 60%;
    height: 340px;
    float: left;
}
</style>
